<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
    <!-- 如果没有此代码就会数就不能回填选中，原因未知 -->
    <!-- <el-tree style="display: none;" :data="data1" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
      :default-checked-keys="keys" :props="defaultProps" /> -->
    <el-tree :render-content="renderContent" :show-checkbox="true" :data="data" :props="defaultProps"
      :expand-on-click-node="false" node-key="id" :default-expanded-keys="expanded" ref="tree"
      :default-checked-keys="keys" :model-value="keys">
      <template #default="{ node, data }">
        <div class="custom-tree-node" style="display: flex">
          <div style="flex: 1">{{ node.label }}</div>
        </div>
      </template>
    </el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import addImageView from "@/components/addImage.vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";

import { vxRule } from "@/utils/validator";

export default {
  name: "AddApp",
  components: { ElForm, addImageView, ElMessage },

  data() {
    return {
      data1: [
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1',
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [
            {
              id: 5,
              label: 'Level two 2-1',
            },
            {
              id: 6,
              label: 'Level two 2-2',
            },
          ],
        },
        {
          id: 3,
          label: 'Level one 3',
          children: [
            {
              id: 7,
              label: 'Level two 3-1',
            },
            {
              id: 8,
              label: 'Level two 3-2',
            },
          ],
        },
      ],
      dialogFormVisible: ref(false),
      expanded: [],
      keys: [],
      checkedData: "",
      data: [
        {
          label: "全部",
          id: "",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      keys: [
        // 15,
        // 16,
        // 17,
        // 19,
        // 18,
        // 47,
        // 48,
        // 49,
        // 52,
        // 51,
        // 50,
        // 54,
        // 55,
        // 57,
        // 58,
        // 59,
        // 21,
        // 22,
        // 23,
        // 60,
        // 24,
        // 26,
        // 27,
        // 43,
        // 184,
        // 185,
        // 187,
        // 29,
        // 30,
        // 31,
        // 32,
        // 33,
        // 65,
        // 67,
        // 66,
        // 68,
        // 72,
        // 69,
        // 106,
        // 71,
        // 79,
        // 100,
        // 80,
        // 81,
        // 82,
        // 101,
        // 83,
        // 84,
        // 88,
        // 4,
        // 3,
        // 98,
        // 99,
        // 140,
        // 141,
        // 142,
        // 143,
        // 144,
        // 163,
        // 165,
        // 182,
        // 170,
        // 171,
        // 180,
        // 181,
        // 162,
        // 186,
        // 159,
        // 168,
        // 93,
        // 94,
        // 91,
        // 95,
        // 96,
        // 74,
        // 75,
        // 87,
        // 97,
        // 148,
        // 152,
        // 153,
        // 155,
        // 103,
        // 105,
        // 110,
        // 111,
        // 112,
        // 113,
        // 114,
        // 115,
        // 108,
        // 121,
        // 122,
        // 123,
        // 124,
        // 125,
        // 126,
        // 127,
        // 132,
        // 133,
        // 134,
        // 146,
        // 173,
        // 174,
        // 175,
        // 176,
        // 179,
        // 189,
        // 190,
        // 193,
        // 192,
        // 191
      ],
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      return h('span', data.label);
    },

    closeDialog() {
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    getAppDataById(id) {
      httpService("/javaApi/appInfo/queryById", { id: id }, "get").then(
        (data) => {
          this.addAppForm = data.object;
          this.addAppForm.type = String(this.addAppForm.type);
          let obj = new Object();
          //回显图片
          if (this.addAppForm.icon != "" && this.addAppForm.icon != null) {
            obj.url = this.addAppForm.icon;
            this.$refs.addImage.pushImage(obj);
            this.$refs.addImage.hideUpload = true;
          }
        }
      );
    },
    clear() {
      this.dialogFormVisible = false;
      this.addAppForm.appName = "";
      this.addAppForm.type = "";
      this.addAppForm.apiKey = "";
      this.addAppForm.background = "";
      this.addAppForm.apiSecret = "";
      this.addAppForm.url = "";
      this.addAppForm.icon = "";
      this.addAppForm.sortNum = "";
      this.$refs.addImage.fileList = [];
      this.$refs.addImage.clearImage();
      this.$refs.addImage.hideUpload = false;
    },
    getTreeData(rId) {
      this.rId = rId;
      httpService("/javaApi/baseMenu/querySelectTree", { rId: rId }, "get").then((data) => {
        this.data[0].children = data.data;
        this.expanded.push(data.data[0].id);
        this.keys = data.keys;
        console.log(this.expanded, this.keys);
        const that = this
        setTimeout(function () {
          that.keys.forEach((value) => {
            //1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false）如果全部选中setCheckedKeys
            that.$refs.tree.setChecked(value, true, false)
          })
        }, 0);
      });
    },
    save() {
      let mIds = this.$refs.tree.getCheckedKeys();
      let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
      params.append("mIds", mIds);
      params.append("rId", this.rId);
      let config = { "Content-Type": "multipart/form-data" };
      httpService("/javaApi/baseRoleMenu/add", params, "post", config).then(
        (data) => {
          if (data.code == 200) {
            ElMessage.success("设置成功");
            this.clear();
            //刷新父组件的数据
            this.$parent.getListApp();
          } else {
            ElMessage.error(data.message);
          }
        }
      );
    },
  },
};
</script>
<style>
.el-my-select {
  display: inline-block;
  position: relative;
  line-height: 32px;
  width: 100%;
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  margin-right: 0 !important;
}
</style>